.com-scroll-box {
  position: relative;
  overflow: initial;
  z-index: 2;
  .scroll-section-wrap {
    margin-top: -100vh;
  }
  a {
    display: block;
    width: 88px;
  }
  .section {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    &.white {
      // /deep/.com-link-btn {
      //   background-color: #FE7D34;
      //   .el-icon-right {
      //     color: #fff;
      //   }
      // }
    }
    &.red {
      background-color: #E46A6A;
      // /deep/.el-icon-right {
      //   color: #E46A6A;
      // }
      .text {
        color: rgba(255,255,255,.7) !important;
      }
    }
    &.blue {
      background-color: #3EA2EB;
      // /deep/.el-icon-right {
      //   color: #3EA2EB;
      // }
      .text {
        color: rgba(255,255,255,.7) !important;
      }
    }
    &.app {
      background-color: #FFDC00;
      // /deep/.com-link-btn {
      //   background-color: #000;
      //   .el-icon-right {
      //     color: #fff;
      //   }
      // }
      
      .desc {
        color: #000 !important;
      }
      .text {
        color: #000 !important;
      }
    }
    &.red, &.blue {
      color: #fff;
      .content {
        .brand-wrap {
          .logo-wrap {
            width: 104px;
            height: 104px;
            background-color: #fff;
            img {
              width: 72px;
            }
          }
        }
        .url {
          color: #fff !important;
        }
        .desc {
          color: #fff !important;
          .title {
            color: #fff !important;
          }
        }
      }
    }
    .content {
      position: relative;
      padding-left: 100px;
      .brand-wrap {
        display: flex;
        align-items: center;
        .logo-box {
          width: 104px;
          height: 104px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 30px;
          background-color: #fff;
          margin-right: 31px;
          img {
            width: 83px;
          }
        }
      }
      .name {
        font-size: 42px;
        font-weight: bold;
      }
      .url {
        font-size: 24px;
        font-weight: lighter;
        color: #333;
      }
      .desc {
        margin-top: 128px;
        width: 364px;
        font-weight: bold;
        .title {
          margin-bottom: 17px;
          font-size: 28px;
          color: #000;
        }
        .text {
          color: #959495;
          font-size: 20px;
        }
      }

      // .com-link-btn {
      //   width: 88px;
      //   margin-top: 40px;
      // }
    }
  }
  .fix-box {
    position: sticky;
    width: 500px;
    height: 100vh;
    top: 0;
    left: 50%;
    z-index: 2;
    display: flex;
    align-content: center;
    justify-content: center;
    .fix-box-container {
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 0;
      width: 960px;
      height: 560px;
      transform: translateY(-50%);
      box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.15);
    }
    .content-wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 960px;
      height: 560px;
      overflow: hidden;
      transform-origin: bottom;
      background-color: #fff;
      .bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: bottom;
      }
    }
  }
}